<template>
    <div>
        <!-- testing/Swipe.vue -->
        <mt-swipe class="swipe" 
            :style="{height:h}"
            :auto="3000"
            :speed="2000"
            :show-indicators="false"
            :continuous="true">
            <mt-swipe-item>
                <img src="../assets/wode_images/01.jpg">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="../assets/wode_images/02.jpg">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="../assets/wode_images/03.jpg">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="../assets/wode_images/04.jpg">
            </mt-swipe-item>
           
        </mt-swipe>

    </div>
</template>
<script>
    export default {
        data(){
            return{
                h:'250px'
            }
        },
        methods:{
                initSwipe(){
        let picwidth = 1242;
        let picheight = 698;
        // 屏幕宽
        let screenwidth = window.screen.width;
        let height = Math.floor(
            (picheight * screenwidth) / picwidth) + 'px'
        // 把计算得到的height，赋值给data中的变量，动态更新轮播图
        this.h = height;   
        }
        },
        mounted(){
        this. initSwipe();
        }
    
    }
</script>

<style scoped>
.swipe img{width:100%;}
</style>